<template>
  <div>
    <div class="category">
      <div class="category-item" v-for="(item, index) in categoryList" :key="index">
        <div class="flex" @click="getCategoryGoodsList(item)">
          <div>{{ item.labelName }}</div>
          <div>
            <nut-icon color-warmGray name="rect-right"></nut-icon>
          </div>
        </div>
        <!-- 分类子级 -->
        <div class="child-list" v-if="item.children && item.children.length !== 0">
          <div class="child" @click="getCategoryGoodsList(child)" :key='i' v-for="(child, i) in item.children">
            {{ child.labelName }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getStoreCategory } from '@/api/goods';
const categoryList = ref<any>([])

const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})



/**商品分类中商品集合 */
function getCategoryGoodsList(val: any) {
  uni.navigateTo({
    url: `/pages/goods/store/store-goods?title=${val.labelName}&id=${val.id}&storeId=${props.id}`,
  });
}

async function init() {
  let res = await getStoreCategory(props.id);
  if (res.data.success) {
    categoryList.value = res.data.result;
  }
}

onMounted(() => {
  init()
})
</script>

<style scoped lang='scss'>
.category-item {
  background: #fff;
  padding: 22rpx;
  margin: 20rpx 10rpx;
  border: 1rpx solid #ededed;

  >.flex {
    color: #666;
    justify-content: space-between;
  }

  >.child-list {
    display: flex;
    margin: 20rpx 0;
    flex-wrap: wrap;

    >.child {
      justify-content: center;
      margin: 1% 0;
      display: flex;
      width: 48%;
      font-size: 24rpx;
      color: #999;
      margin-right: 1%;
      border: 1rpx solid #ededed;
      box-sizing: border-box;
      height: 70rpx;
      text-align: center;
      line-height: 70rpx;
    }
  }
}
</style>
